<template>
  <div>
    <a-select v-model:value="deptvalues" mode="tags" style="width: 100%" placeholder="请选择社团" :options="options"
      @change="handleChanges" />
    <a-input v-model:value="Headervalues" placeholder='请输入你的内容标题头' />
    <Tinymce width="100%" v-model="value" @change="handleChange" :toolbar="[]" />
    <a-button block @click="
      HtmlAxios({
        Html: handleChange(),
        Deptvalue: deptvalues,
        Header: Headervalues
      })
    ">上传文章</a-button>
  </div>
</template>

<script lang="ts" setup>
import { Tinymce } from '/@/components/Tinymce/index';
import { ref, reactive } from 'vue';
import HtmlAxios from '/@/utils/http/axios/htmlApi';
import { useDeptStoreWithOut } from '/@/store/modules/dept';
const value: any = ref('');
let options: any = reactive([]);
const deptvalues = ref([]);
const Headervalues = ref([])
function handleChange() {
  const reactives = reactive(value.value);
  return reactives;
}
const handleChanges = (_value?: string) => {
  console.log(options, 'GGGGGGGGGGGGGGGGGGGGGG', deptvalues);
};

const getDetpList = async function () {
  const deptStore = useDeptStoreWithOut();
  try {
    // loading.value = true;
    const deptList: any = await deptStore.getDeptList({
      mode: 'none',
    });
    if (deptList) {
      for (let i = 0; i < deptList.length; i++) {
        options[i] = {
          value: deptList[i].name,
        };
      }
    }
  } catch (error) {
    console.log(error);
  } finally {
  }
};

getDetpList();
</script>

<style>
</style>
